<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>简单Tab测试</title>
    <link rel="stylesheet" href="styles.css">
    <style>
        .test-container {
            max-width: 800px;
            margin: 50px auto;
            padding: 20px;
            background: white;
            border-radius: 10px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }
        .test-log {
            background: #f8f9fa;
            border: 1px solid #e9ecef;
            border-radius: 5px;
            padding: 10px;
            margin: 10px 0;
            font-family: monospace;
            font-size: 12px;
            max-height: 200px;
            overflow-y: auto;
        }
    </style>
</head>
<body>
    <div class="test-container">
        <h1>🧪 简单Tab切换测试</h1>
        <p>测试tab切换功能是否正常工作</p>
        
        <!-- 导航标签 -->
        <nav class="nav-tabs">
            <button class="nav-tab active" data-tab="quick">⚡ 快速测试</button>
            <button class="nav-tab" data-tab="models">📦 模型API</button>
            <button class="nav-tab" data-tab="subscriptions">🔔 订阅API</button>
            <button class="nav-tab" data-tab="servers">🖥️ 服务器API</button>
            <button class="nav-tab" data-tab="websocket">🔌 WebSocket</button>
            <button class="nav-tab" data-tab="batch">📋 批量操作</button>
        </nav>

        <!-- 快速测试标签页 -->
        <div id="quick-tab" class="tab-content active">
            <div class="section-header">
                <h2>⚡ 快速测试</h2>
            </div>
            <p>这是快速测试标签页的内容。</p>
        </div>

        <!-- 模型API标签页 -->
        <div id="models-tab" class="tab-content">
            <div class="section-header">
                <h2>📦 模型API测试</h2>
            </div>
            <p>这是模型API标签页的内容。</p>
        </div>

        <!-- 订阅API标签页 -->
        <div id="subscriptions-tab" class="tab-content">
            <div class="section-header">
                <h2>🔔 订阅API测试</h2>
            </div>
            <p>这是订阅API标签页的内容。</p>
        </div>

        <!-- 服务器API标签页 -->
        <div id="servers-tab" class="tab-content">
            <div class="section-header">
                <h2>🖥️ 服务器API测试</h2>
            </div>
            <p>这是服务器API标签页的内容。</p>
        </div>

        <!-- WebSocket标签页 -->
        <div id="websocket-tab" class="tab-content">
            <div class="section-header">
                <h2>🔌 WebSocket测试</h2>
            </div>
            <p>这是WebSocket标签页的内容。</p>
        </div>

        <!-- 批量操作标签页 -->
        <div id="batch-tab" class="tab-content">
            <div class="section-header">
                <h2>📋 批量操作测试</h2>
            </div>
            <p>这是批量操作标签页的内容。</p>
        </div>
        
        <div class="test-log" id="testLog">
            <div>测试日志将显示在这里...</div>
        </div>
    </div>

    <script>
        let currentTab = 'quick';
        
        // 测试日志函数
        function testLog(message) {
            const logContainer = document.getElementById('testLog');
            const timestamp = new Date().toLocaleTimeString('zh-CN');
            const logEntry = document.createElement('div');
            logEntry.innerHTML = `[${timestamp}] ${message}`;
            logContainer.appendChild(logEntry);
            logContainer.scrollTop = logContainer.scrollHeight;
        }
        
        // Tab切换函数
        function switchTab(tabName) {
            testLog(`🔄 切换到Tab: ${tabName}`);
            
            try {
                // 隐藏所有标签页
                document.querySelectorAll('.tab-content').forEach(tab => {
                    tab.classList.remove('active');
                });
                
                // 移除所有标签按钮的激活状态
                document.querySelectorAll('.nav-tab').forEach(btn => {
                    btn.classList.remove('active');
                });
                
                // 显示目标标签页
                const targetTab = document.getElementById(`${tabName}-tab`);
                if (targetTab) {
                    targetTab.classList.add('active');
                    testLog(`✅ 显示标签页: ${targetTab.id}`);
                } else {
                    testLog(`❌ 未找到标签页: ${tabName}-tab`);
                }
                
                // 激活对应的标签按钮
                const targetBtn = document.querySelector(`[data-tab="${tabName}"]`);
                if (targetBtn) {
                    targetBtn.classList.add('active');
                    testLog(`✅ 激活按钮: ${targetBtn.getAttribute('data-tab')}`);
                } else {
                    testLog(`❌ 未找到按钮: data-tab="${tabName}"`);
                }
                
                currentTab = tabName;
                testLog(`✅ Tab切换完成: ${tabName}`);
                
            } catch (error) {
                testLog(`❌ Tab切换失败: ${error.message}`);
                console.error('Tab切换错误:', error);
            }
        }
        
        // 设置事件监听器
        function setupEventListeners() {
            testLog('🔧 设置事件监听器...');
            
            // Tab切换事件监听器
            document.querySelectorAll('.nav-tab').forEach(tab => {
                tab.addEventListener('click', function() {
                    const tabName = this.getAttribute('data-tab');
                    testLog(`🖱️ 点击Tab按钮: ${tabName}`);
                    switchTab(tabName);
                });
            });
            
            testLog('✅ 事件监听器设置完成');
        }
        
        // 页面加载完成后初始化
        document.addEventListener('DOMContentLoaded', function() {
            testLog('🚀 页面加载完成，开始初始化...');
            setupEventListeners();
            testLog('✅ 初始化完成');
        });
    </script>
</body>
</html>



